﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Form - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/validatebox/jeasyui.extensions.validatebox.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/form/jeasyui.extensions.form.getData.js"></script>
    <script>
        $(function () {

            $("#btnSet1").click(function () {
                $("#userName").validatebox("disable");
            });
            $("#btnSet11").click(function () {
                $("#userName").validatebox("enable");
            });

            $("#btnSet2").click(function () {
                $("#realName").validatebox("disable");
            });
            $("#btnSet22").click(function () {
                $("#realName").validatebox("enable");
            });


            $("#btnGetData").click(function () {
                var param = {};
                param.onlyEnabled = $.string.toBoolean($("[name='onlyEnabled']:checked").val());
                param.transcript = $("[name='transcript']:checked").val();
                param.overtype = $("[name='overtype']:checked").val();
                param.separator = $("#separator").val();

                var data = $("#fm").form("getData", param);

                console.log(data);
            });

        });
    </script>
</head>
<body>
    <div class="easyui-panel" data-options="fit:true,border:false" style="padding:20px;">
        <div style="border:#ccc 1px solid;padding:10px;margin-bottom:15px;">
            <form id="fm">
                用户名：<input type="text" id="userName" name="userName" class="easyui-validatebox" value="" />&nbsp;&nbsp;
                <a id="btnSet1" class="easyui-linkbutton" data-options="iconCls:'icon-add'">禁用 用户名 控件</a>
                <a id="btnSet11" class="easyui-linkbutton" data-options="iconCls:'icon-add'">启用 用户名 控件</a>
                <br /><br />

                姓名：<input type="text" id="realName" name="realName" class="easyui-validatebox" value="" />&nbsp;&nbsp;
                <a id="btnSet2" class="easyui-linkbutton" data-options="iconCls:'icon-add'">禁用 姓名 控件</a>
                <a id="btnSet22" class="easyui-linkbutton" data-options="iconCls:'icon-add'">启用 姓名 控件</a>
                <br /><br />

                年龄：<input type="text" id="age" name="age" class="easyui-numberbox" value="" style="width:70px;" />
                <br /><br /><br />
                性别：
                <input name="sex" type="radio" value="male" /> 男 &nbsp;
                <input name="sex" type="radio" value="female" checked="checked" /> 女 &nbsp;
                <br /><br />
                掌握技能：
                <input type="checkbox" id="skill1" name="skill" value="C#" /> <label for="skill1">C#</label> &nbsp;&nbsp;
                <input type="checkbox" id="skill2" name="skill" value="Java" /> <label for="skill2">Java</label> &nbsp;&nbsp;
                <input type="checkbox" id="skill3" name="skill" value="Php" /> <label for="skill3">Php</label> &nbsp;&nbsp;
                <input type="checkbox" id="skill4" name="skill" value="C++" /> <label for="skill4">C++</label> &nbsp;&nbsp;
                <input type="checkbox" id="skill5" name="skill" value="汇编" /> <label for="skill5">汇编</label> &nbsp;&nbsp;
            </form>
        </div>
        <span style="color:red;">请选择序列化规则：</span>
        <br /><br />
        1：<span style="color:red;">onlyEnabled</span> 是否仅包含启用(disabled == false)的 HTML 表单控件 ：
        <br />
        <input type="radio" name="onlyEnabled" value="true" checked="checked" /> 过滤禁用的控件
        <input type="radio" name="onlyEnabled" value="false" /> 包含禁用的控件
        <br /><br />
        2：<span style="color:red;">transcript</span> 当范围内存在重名(name 相同时)的 DOM 元素时，对重复元素的取值规则：
        <br />
        <input type="radio" name="transcript" value="cover" checked="checked" /> cover，只取后面元素 的值，丢弃前面元素的值；
        <input type="radio" name="transcript" value="discard" /> discard，丢弃后面元素的值，只取前面元素的值
        <input type="radio" name="transcript" value="overlay" /> overlay，将所有元素的值进行叠加；
        <br /><br />
        3：<span style="color:red;">overtype</span> 元素叠加方式（当 transcript 的值定义为 "overlay" 时，此属性方有效）：
        <br />
        <input type="radio" name="overtype" value="array" /> array，将所有重复的元素叠加为一个数组；
        <input type="radio" name="overtype" value="append" checked="checked" /> append，将所有的重复元素叠加为一个字符串；
        <br /><br />
        4：<span style="color:red;">separator</span> 元素叠加的分隔符，定义将所有重名元素叠加为一个字符串时用于拼接字符串的分隔符（当 transcript 的值定义为 "overlay" 且 overtype 的值定义为 "append" 时，此属性方有效）：
        <br />
        <input type="text" id="separator" name="separator" value="," />
        <br />
        <br />

        <a id="btnGetData" class="easyui-linkbutton" data-options="iconCls:'icon-save'">获取表单序列化对象（请用浏览器开发者工具（F12）的控制台查看序列化结果）</a>
    </div>
</body>
</html>
